<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
	<meta name="author" content="Florian Bosselmann" />

	<!--
		        __          ____       
		    ___/\ \    ___ /\    \ ___
		   /\   \\ \ |  __ \ \ \Z | __ \   
		   \ \ \Z \ \_\ \/\ \ \ \Z\ \/\ \
		    \ \  _\\__\\ \_\ \ \____|\_\ \
		     \ \_\\/__/ \____|/____/\____| 
			  \/_/     \ ___/      \ ___/    be happy.
	-->
	
	<title>PrintOrder Installation</title>
	<script type="text/javascript" src="../_includes/mootools.js"></script>
	<style type="text/css">
		body { width:100%; text-align:center; background-color:#EFEFEF; font-family:Verdana, Geneva, Arial, Helvetica, sans-serif; font-size:12px;}
		#canvas { padding:70px 20px 20px 20px; background-image:url('../images/install_head.jpg'); background-repeat:no-repeat; float:left; width:400px; -moz-border-radius:6px; text-align:left; background-color:#FFF; }
		.check { float:left; height:16px; width:16px; margin-right:5px;}
		.check.not { background-image:url('../images/not.gif'); }
		.check.ok { background-image:url('../images/ok.gif'); }
		#check_db { float:left; }
		#check_db_result { float:left; }
	</style>
	<script type="text/javascript">
		//_/_/_/_/_  lets do some scripting 
		var connector = 'connector.php'; 		// guess what, this is the ajax answer machine
		
		// helper making life easier
		Element.prototype.hide=function(styles) { this.style.display='none';if(typeof styles != 'undefined')this.setStyles(styles);return this; }
		Element.prototype.show=function(styles) { this.style.display='block';if(typeof styles != 'undefined')this.setStyles(styles);return this; }
		Element.prototype.toggle=function(styles) { this.style.display == 'block' || this.style.display == '' ? 'none' : 'block'; if(typeof styles != 'undefined')this.setStyles(styles); return this; }
		String.prototype.in_object=function(obj){for(e in obj){if(e==this){return true;}}return false}
		String.prototype.innerHTML=function(str){ $(this).innerHTML = str; }
		String.prototype.send=function(callback){var eq=new Request({method:'get',url:connector,onComplete:callback}).send(this);}
		
		
		window.addEvent('domready',function () {
			$('php_error').hide();
			$('body').hide();

			start();
		});
		 
		start = function () {
			'check=checkServer'.send(function(res) {
				res = JSON.decode(res);
				var goon = true;
				
				if(Number(res.PHP.substr(0,1)) < 5){
					$('php_error').innerHTML = 'Sorry PHP Version 5 or higher required, your Version: '+res.PHP;
					$('php_error').style.display = 'block';
					return;
				}
				
				$('body').show().fade('in');
				
				if(res.configfile) {
					$('check_configfile').addClass('ok').removeClass('not');
					$('check_configfile_result').innerHTML = 'Config file is writable';
				} else {
					$('check_configfile_result').innerHTML = 'File /config.inc.php is not writeable, Config settings will have to be saved manually.';
				}
				
				
				if(!res.packingslips) {
					goon = false;
					$('check_packingslips_result').innerHTML = 'Please make directory /packingslips writeable.';
				} else {
					$('check_packingslips').addClass('ok').removeClass('not');
					$('check_packingslips_result').innerHTML = 'Directory /packingslips is writeable.';
				}
				
				
				if(goon) {
					$('step1').show({'opacity':0}).fade('in');
					$('step0_again').fade('out');
				} else {
					$('step0_again').show({'opacity':0}).fade('in');
				}
			});
			
			$('step1').getElements('input').each(function(el) {
				el.onchange = function () {
					checkUser(el);
				}
			});
		};
		
		var check = { 'dbuser':false, 'dbpass':false, 'dbhost':'localhost' }
		
		function checkUser (element) {
			
			if(element.name.indexOf('db')!=-1) {
				if(element.name.in_object(check)) {
					check[element.name] = element.value;
				}
				
				var req = 'check=DB&set=connect';
				for(e in check) {
					if(check[e]===false) { return false; }
					else { req += '&'+e+'='+check[e]; }
				}
				
				
				
				req.send(function(res) {
					if(res) {
						$('check_db_result').innerHTML = res;
						if($('check_db').hasClass('ok')) {
							$('check_db').removeClass('ok').addClass('not');
						}
					} else {
						if (!$('check_db').hasClass('ok')) {
							$('check_db').removeClass('not').addClass('ok');
						}
						$('check_db_result').innerHTML = 'Database user correct!';
						'check=DB&set=listDB'.send(function(json) {
							var list = JSON.decode(json);
							
							var options = {'list':''};
							list.each(function(e) { this.list += '<option value="'+e+'">'+e+'</option>'; },options);
							'selectDB'.innerHTML(options.list);
							$('step2').show({'opacity':0}).fade('in');
						});
					}
				});
			}
		}
		
		function selectDB(db) {
			('check=DB&set=selectdb&dbname='+db).send();
			$('step3').show({'opacity':0}).fade('in');
		}
		
		function letsGo() {
			'check=DB&set=letsGo'.send(function(res){
				if(res) {
					alert("error: "+res);
				} else {
					$('step1').fade('out');
					$('step2').fade('out');
					$('step3').fade('out');
					setTimeout(function() { 
						$('step0').hide();
						$('step1').hide();
						$('step2').hide();
						$('step3').hide();
						$('step4').show({'opacity':0}).fade('in');
					},400);
				}
			});
		}
	</script>
</head>
<body>
	<div id="canvas">
		<div id="body">
			<div id="step0">
				<h3 >Server configuration</h3>
				<div id="check_packingslips" class="check not"></div><div id="check_packingslips_result"> </div>
				<div id="check_configfile" class="check not"></div><div id="check_configfile_result"> </div>  <br><br>
				<div id="step0_again" onclick="start();" class="button" style="display:none">try again</div>
			
			</div>
			<div id="step1" style="display:none">
				
				<h3>Step 1/3 - Database User</h3>
				
				<table width="100%">
					<tr>
						<td colspan="2">
							
						</td>
					<tr>
						<td width="200px" >Database host:</td>
						<td>localhost</td>
					</tr>
					<tr style="display:none">
						<td>Database name:</td>
						<td><input type="text" name="dbname" value="" /></td>
					</tr>
					<tr>
						<td>Database user:</td>
						<td><input type="text" name="dbuser" value="" /></td>
					</tr>
					<tr>
						<td>Database password:</td>
						<td><input type="text" name="dbpass" value="" /></td>
					</tr>
					<tr>
						<td colspan="2"><div id="check_db" class="check not"></div><div id="check_db_result">Database user not yet complete.</div>  </td>
					</tr>
				</table>
			</div>
			
			<div id="step2" style="display:none">
				<h3>Step 2/3 - Select Database to use</h3>
				<table width="100%">
						
						<td width="200px" >Create tables in Database:</td>
						<td>
							<select onchange="selectDB(this.value)" id="selectDB"></select>
						</td>
					</tr>
					<tr>
						<td colspan="2" style="font-size:9px; color:#666;">Note: Because auf security reasons, the user you have provided obove should not
						have admin database rights. This is why you must create a database first, and select it here.
					</tr>
				</table>
			</div>
			
			<div id="step3" style="display:none">
				<h3>Step 3/3 - Create Tables</h3>
				<div >What we've got: Database user and database name. Next and final step is to create the tables and insert some test data.<br><br>
				<div class="button" onclick="letsGo();">ok, lets go!</div></div>
			</div>
			
			<div id="step4" style="display:none">
				<h3>WOOHOO! Complete!</h3>
				<div>That was easy eh?? Just to make sure nobody can overwrite your settings, remove or rename the folder /printorder/install. <br><br>
				Now you can login <a href="../index.php" target="_blank"><b>here</b></a>, your login name is "admin" and password is "odrit". Not quite the safest, so get your own asap.<br><br>
				</div>
			</div>
		</div>
		<div id="php_error">Sorry, this Software requires PHP Version 5 or higher, you are using Version </div>
	</div>
</body>
</html>